<template>
  <div>
    <pannel title="账号列表">
      <el-table
        ref="table"
        @selection-change="changeCheck"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="account" label="账号"> </el-table-column>
        <el-table-column prop="userGroup" label="用户组"> </el-table-column>
        <el-table-column prop="ctime" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editBtn(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delBtn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="mt20">
        <el-pagination
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <div class="mt20">
        <el-button type="danger" @click="delAll()">批量删除</el-button>
        <el-button type="primary" @click="clearCheck">取消选择</el-button>
      </div>
    </pannel>
    <!-- 模态框 -->
    <el-dialog title="收货地址" :visible.sync="show">
      <el-form :model="form">
        <el-form-item label="账号" label-width="120px">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组" label-width="120px">
          <el-select v-model="form.userGroup" placeholder="请选择用户组">
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="超级管理员" value="超级管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="editInfoBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pannel from "@/components/Pannel.vue";
import { usersList, delAllUser, delUser, usersEdit } from "@/api/users.js";
export default {
  data() {
    return {
      //分页当前页
      page: 1,
      //每页条数
      pageSize: 5,
      //总数据条数
      total: 0,

      tableData: [],
      //复选框选中的项
      multipleSelection: [],

      //模态框
      show: false,
      form: {},
    };
  },
  components: {
    Pannel,
  },
  methods: {
    //点击模态框的 确定按钮 修改用户信息
    editInfoBtn() {
      //将修改完成之后的数据 传递给后端
      //将模态框 隐藏起来
      //提示用户 修改成功
      //拉取列表--重新渲染
      console.log(this.form);
      usersEdit(this.form).then((res) => {
        if (res.code == 0) {
          this.show = false;
          this.$message({
            type: "success",
            message: "修改成功",
          });
        }
        this.getAccoutList();
      });
    },
    //表格按钮事件
    editBtn(row) {
      //修改模态框的显隐状态为 true
      this.show = true;
      //给form 变量赋值初始值===当前被点击的row
      console.log(row);
      this.form = { ...row };
    },
    async delBtn(id) {
      let res = await delUser({ id });
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "删除成功",
          duration: 1000,
        });
      }
      this.getAccoutList();
    },

    //分页器
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAccoutList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getAccoutList();
    },
    //封装一个函数 --发送列表请求
    async getAccoutList() {
      //组装后端需要 的数据
      //发送请求
      //根据最新数据 渲染页面（更改页面绑定数据）
      let data = {
        currentPage: this.page,
        pageSize: this.pageSize,
      };
      let res = await usersList(data);
      //根据后端的返回值 重新修改数据
      this.total = res.total;
      this.tableData = res.data;
    },

    //复选框的事件
    changeCheck(rows) {
      this.multipleSelection = rows;
    },
    clearCheck() {
      //只改了 数据
      this.multipleSelection = [];
      //数据和页面选中项 效果 联动
      this.$refs.table.clearSelection();
    },
    //批量删除用户
    async delAll() {
      //如果没有选中项 --直接不进行后面的操作
      if (this.multipleSelection.length == 0) {
        return;
      }
      try {
        //组装数据
        let arr = this.multipleSelection.map((item) => item.id);
        let data = {
          ids: JSON.stringify(arr),
        };
        //调用接口
        let res = await delAllUser(data);
        //如果成功 ---提示用户 成功啦
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: "批量删除成功",
            duration: 1000,
          });
        }
        //重新调用列表接口 --重新渲染页面
        this.getAccoutList();
      } catch (err) {
        console.log(err);
      }
    },
  },

  created() {
    //发送 axios 请求列表
    this.getAccoutList();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f44;
}
</style>